<template>
	<view>
		<view class="header">
			<image @click="back" class="back" src="../../static/tian/back.png" mode=""></image>
			<view class="text">{{$t('wallet.Charge')}}</view>
			<image @click="toTime" class="time" src="../../static/img/time.png" mode=""></image>
		</view>
		<view style="height: 104rpx;"></view>
		<view class="item">
			<view class="title">{{$t('wallet.SelectiveBackbone')}}</view>
			<u-radio-group v-model="radiovalue1" activeColor="#ffb105" @change="groupChange">
				<u-radio v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
					@change="radioChange">
				</u-radio>
			</u-radio-group>
		</view>
		<view class="item">
			<view class="title">{{$t('wallet.Recode')}}</view>
			<img v-if="radiovalue1 == 'BSC-20'" :src="list.bsc20_qrocde" alt="" class="code">
			<img v-if="radiovalue1 == 'ERC-20' || radiovalue1 == 'ETH'" :src="list.erc20_qrocde" alt="" class="code">
			<img v-if="radiovalue1 == 'BTC'" :src="list.btc_qrocde" alt="" class="code">
			<img v-if="radiovalue1 == 'TRC-20'" :src="list.trc20_qrocde" alt="" class="code">
		</view>
		<view class="item">
			<view class="title">{{$t('wallet.topUpAddress')}}</view>
			<view class="copy_con" v-if="radiovalue1 == 'BSC-20'">
				<view class="con">
					{{list.bsc20_address}}
				</view>
				<view class="copy" @click="copy(list.bsc20_address)">
					<img src="../../static/img/copy.png" alt="">
				</view>
			</view>
			<view class="copy_con" v-if="radiovalue1 == 'ERC-20' || radiovalue1 == 'ETH'">
				<view class="con">
					{{list.erc20_address}}
				</view>
				<view class="copy" @click="copy(list.erc20_address)">
					<img src="../../static/img/copy.png" alt="">
				</view>
			</view>
			<view class="copy_con" v-if="radiovalue1 == 'BTC'">
				<view class="con">
					{{list.btc_address}}
				</view>
				<view class="copy" @click="copy(list.btc_address)">
					<img src="../../static/img/copy.png" alt="">
				</view>
			</view>
			<view class="copy_con" v-if="radiovalue1 == 'TRC-20'">
				<view class="con">
					{{list.trc20_address}}
				</view>
				<view class="copy" @click="copy(list.trc20_address)">
					<img src="../../static/img/copy.png" alt="">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {domain} from '../../config/domain.js'
	export default {
		data() {
			return {
				radiolist: [{
						name: 'BSC-20',
						disabled: false
					},
					{
						name: 'ERC-20',
						disabled: false
					},
					{
						name: 'TRC-20',
						disabled: false
					}, {
						name: 'BTC',
						disabled: false
					},
					{
						name: 'ETH',
						disabled: false
					}
				],

				radiovalue1: 'BSC-20',
				list:[]
			};
		},
		methods: {
			getinfo(){
				var url=domain + 'api/user/info';
				var mytype='get';
				var userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						if(res.data.code == 1){
							this.list = res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			copy(value){
				uni.setClipboardData({
					data:value,//要被复制的内容
					success:()=>{//复制成功的回调函数
						uni.showToast({//提示
							icon:'none',
							title:this.$t('first.title115')
						})
					}
				});
			},
			toTime() {
				uni.navigateTo({
					url: '/pages/index/cross?tab=0'
				})
			},
			back() {
				wx.navigateBack()
			},
			groupChange() {

			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('wallet.Charge')
			});
			this.getinfo()
		}
	}
</script>
<style>
	.header {
		width: 100%;
		height: 104rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}

	.header image {
		width: 48rpx;
		height: 48rpx;
	}

	.header .text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #222;
	}

	.back {
		margin-left: 20rpx;
	}

	.time {
		margin-right: 20rpx;
	}
</style>
<style lang="scss">
	page {
		background-color: #ecf0f5;
	}

	.item {
		width: 90%;
		margin: 30rpx auto;

		.title {
			font-size: 30rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #8287a2;
		}

		.u-radio-group {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			.u-radio {
				width: 25%;
				margin: 10rpx;
			}
		}

		.code {
			width: 230rpx;
			height: 230rpx;
			margin-top: 20rpx;
			margin-left: 210rpx
		}

		.copy_con {
			margin-top: 20rpx;
			width: 90%;
			height: 100rpx;
			background-color: #fff;
			padding: 20rpx;
			display: flex;
			height: 100rpx;
			border-radius: 40rpx;

			.con {
				width: 90%;
				height: 100%;
				display: flex;
				font-size: 30rpx;
				flex-direction: column;
				word-wrap:break-word;
			}

			.copy {
				width: 10%;
				height: 100%;
				position: relative;

				img {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					bottom: 0
				}
			}

		}


	}
</style>